<template>
  <div class="sharecircle-categoty-modal">
    <div v-if="loading" style="background: #fff; padding: 20px">
      <a-skeleton active />
    </div>
    <client-only v-else>
      <div slot="placeholder" style="background: #fff; padding: 30px 20px">
        <a-skeleton active :paragraph="{ rows: 3 }" />
      </div>
      <div v-if="!circleList.length" style="padding: 30px 0; background: #fff">
        <a-empty
          description="暂无数据"
          :image="require('~/assets/images/nodata.png')"
        />
      </div>
      <!-- 友圈分享列表 -->
      <div v-else class="shart-list-block">
        <div v-for="item in circleList" :key="item.id" class="share-block">
          <div class="top">
            <HeadAvatar
              open-target="self"
              :to="`/user/${item.userId}`"
              :img="item.avatar"
            />
            <div class="right-info">
              <p class="nickname">
                <nuxt-link :to="`/user/${item.userId}`">{{
                  item.nickname
                }}</nuxt-link>
              </p>
              <p class="desc">
                <span v-if="item.job">{{ item.job }} · </span
                >{{ cycleDate(item.createTime) }}
              </p>
              <p class="share-info">{{ item.hasLimit && item.toggle ? item.limitContent : item.content }}</p>
              <div
                class="limit-box"
                v-if="item.hasLimit">
                <span @click="item.toggle = !item.toggle">{{ item.toggle ? '展开' : '收起' }}</span>
              </div>
              <div v-if="item.picList?.length" class="img-box">
                <div
                  v-for="itemName in item.picList"
                  :key="itemName"
                  class="share-img"
                  @click="handlePreview({ url: itemName })"
                >
                  <img :src="itemName" alt="shareImg" />
                </div>
              </div>
            </div>
            <a-popover
              v-if="userInfo.id === item.userId && category === '1'"
              placement="bottomRight"
            >
              <template slot="content">
                <div class="circle-list-operate">
                  <p @click="deleteShareCircle(item.id)">
                    <a-icon type="delete" />删除
                  </p>
                </div>
              </template>
              <div class="operate-fixed" @click.stop>
                <a-icon type="more" />
              </div>
            </a-popover>
          </div>
          <div class="agree-users" v-if="item.agreeUsers?.length">
            <div class="agree-users-modal">
              <div
                class="single-user"
                v-for="(itemName, idx) in item.agreeUsers"
                :key="idx"
                :style="{ right: idx * 14 + 'px' }">
                <img :src="itemName.avatar || 'https://image.zdxblog.cn/picture/16849805191921684980519192.png'" alt="avatar">
              </div>
            </div>
            <p>{{ item.agreeUsers?.length === 5 ? '等人' : '' }}赞过</p>
          </div>
          <div class="bottom">
            <nuxt-link target="_blank" :to="`/sharecircle/${item.id}`">
              <i class="ri-message-ai-3-line"></i>
              <span v-if="item.commentCount">{{ item.commentCount }}</span>
            </nuxt-link>
            <div :class="{ like: item.isLiker }" @click="isLikeCircle(item)">
              <i class="ri-thumb-up-line"></i>
              <span v-if="item.agreeCount">{{ item.agreeCount }}</span>
            </div>
          </div>
        </div>
      </div>
    </client-only>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { cycleDate } from '~/util'
export default {
  props: {
    circleList: {
      type: Array,
      default: () => []
    },
    loading: Boolean,
    category: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      cycleDate
    }
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.userInfo
    })
  },

  methods: {
    /**
     * delete sircle
     */
    async deleteShareCircle (circleId) {
      try {
        await this.$axios.get(`/gimishare/api/v1/shares/delete?id=${circleId}`)
        this.$message.success('删除成功')
        this.$emit('delete-circle', circleId)
      } catch (error) {
        console.log(error)
      }
    },

    /**
     * user like or unlike sharecircle
     * @param { Object } circleItem
     */
    async isLikeCircle (circleItem) {
      if (!this.userInfo) {
        return this.$store.commit('UPDATE_LOGIN_VISIBLE', true)
      }
      try {
        const API = circleItem.isLiker ? '/shares/unagree' : '/shares/agree'
        await this.$axios.get(`/gimishare/api/v1${API}?id=${circleItem.id}&uid=${circleItem.userId}`)
        if (circleItem.isLiker) {
          circleItem.agreeCount -= 1
        } else {
          circleItem.agreeCount += 1
        }
        circleItem.isLiker = !circleItem.isLiker
      } catch (error) {}
    },

    handlePreview (file) {
      this.$store.commit('UPDATE_PREVIEW_IMGSRC', file.url)
    }
  }
}
</script>
